<script>
import {getUser} from "../../utils/utils";

export default {
  name: "Orders",
  data(){
    return{
      user:{},
      page:{},
      pageSize:5,
      dialogVisible:false,
      showData:{},
      dialogFormVisible:false,
      form:{
        provinceId:'',
        address:'',
        phone:'',
        name:'',
        id:'',
        cost:''
      },
      provinces:[],
      addAddress:{},
      address:[],
      showFlag:false,
      userAddress:[],
      addressFlag:false,
      addressForm:{},
    }
  },
  methods:{
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    cancel(row){
      this.$confirm('您正在取消订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('order/cancel?id='+row.id).then(resp=> {
          if(resp.data.flag){
            this.$message.success(resp.data.msg)
            this.paging(1)
          }else {
            this.$message.error(resp.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    close(){
      this.showData={}
      this.dialogVisible=false
      this.dialogFormVisible=false
      this.form.name=''
      this.form.provinceId=''
      this.form.address=''
      this.form.phone=''
      this.form.id=''
      this.form.cost=''
    },
    close1(){
      this.showFlag=false
      this.addressForm={}
    },
    view(row){
      this.showData=row
      this.dialogVisible=true
    },
    aliPay(){
      if (!this.form.provinceId){
        this.$message.warning('请选择地址')
        return
      }
      if(!this.form.address){
        this.$message.warning('请输入详细地址')
        return;
      }
      var phoneRegex = /^[1][3-9]\d{9}$/; // 手机号正则表达式
      if (!phoneRegex.test(this.form.phone)) {
        // 手机号不符合要求，显示提示信息
        this.$message({
          type: 'warning',
          message: '请输入正确的手机号'
        });
        return;
      }
      if (!this.form.name){
        this.$message.warning('请输入收货人姓名')
        return;
      }
      let fd=new FormData
      Object.keys(this.form).forEach(key=>{
        fd.append(key,this.form[key])
      })
      this.$axios.post('order/update',fd).then(resp=>{
        if (resp.data.flag){
          window.open("http://localhost:8081/alipay/pay?subject="+this.user.id+"&traceNo="+this.form.id+"&totalAmount="+this.form.cost)
        }else {
          this.$message.error(resp.data.msg)
        }
      })

    },
    pay(row){
      this.dialogFormVisible=true
      this.$axios.get('address/list?userId='+this.user.id).then(resp=>{
        this.userAddress=resp.data.data
      })
      this.form.id=row.id
      this.form.cost=row.cost
    },
    handleCurrentChange(val){
      this.form.provinceId=val.provinceId
      this.form.address=val.address
      this.form.phone=val.phone
      this.form.name=val.name
    },
    newAddress(){
      this.showFlag=true
      this.addressFlag=true
      this.$axios.get('province/list').then(resp=>{
        this.addressFlag=false
        this.address=resp.data.data
      })
    },
    addNewAddress(){
      if (!this.addressForm.provinceId){
        this.$message.warning('请选择地址')
        return
      }
      if(!this.addressForm.address){
        this.$message.warning('请输入详细地址')
        return;
      }
      var phoneRegex = /^[1][3-9]\d{9}$/; // 手机号正则表达式
      if (!phoneRegex.test(this.addressForm.phone)) {
        // 手机号不符合要求，显示提示信息
        this.$message({
          type: 'warning',
          message: '请输入正确的手机号'
        });
        return;
      }
      if (!this.addressForm.name){
        this.$message.warning('请输入收货人姓名')
        return;
      }
      let fd =  new FormData
      Object.keys(this.addressForm).forEach(key=>{
        fd.append(key,this.addressForm[key])
      })
      fd.append('userId',this.user.id)
      this.$axios.post('address/add',fd).then(resp=>{
        if(resp.data.flag){
          this.$message.success(resp.data.msg)
          this.$axios.get('address/list?userId='+this.user.id).then(resp=>{
            this.userAddress=resp.data.data
            this.close1()
          })
        }else {
          this.$message.error(resp.data.msg)
        }
      })
    },
    handleChange(value) {
      this.addressForm.provinceId=this.provinces[2]
      // console.log(this.addressForm.provinceId)
    },
    paging(curPage){
      this.$axios.get('order/list?userId='+this.user.id+'&curPage='+curPage+'&pageSize='+this.pageSize).then(resp=>{
        if (resp.data.flag){
          this.page=resp.data.data
        }else {
          this.$message.error('获取订单列表失败')
        }
      })
    },
    confirmReceipt(row){
      this.$confirm('请确认是否收到商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let fd=new FormData
        Object.keys(row).forEach(key=>{
          if (row[key]!==null&&key!=='shoppingCarts'){
            fd.append(key,row[key])
          }
        })
        let creatByIds=[]
        row.shoppingCarts.forEach(item=>{
          creatByIds.push(item.id)
        })
        fd.append('creatByIds',creatByIds)
        this.$axios.post('order/confirmReceipt',fd).then(resp=>{
          if (resp.data.flag){
            this.$message.success(resp.data.msg)
            this.paging(1)
          }else {
            this.$message.error(resp.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消确认收货'
        });
      });
    }
  },
  created() {
    this.user=getUser()
    this.paging(1)
  }
}
</script>

<template>
<div>
  <el-table
    :data="page.list"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="订单号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="cost"
      label="花费（￥）"
      width="180">
    </el-table-column>
    <el-table-column
      prop="creatTime"
      label="创建日期">
    </el-table-column>
    <el-table-column
      prop="payTime"
      label="支付日期">
    </el-table-column>
    <el-table-column
      prop="receiveTime"
      label="收货日期"
      width="180"
    >
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="状态"
      width="80"
    >
      <template slot-scope="scope">
        {{ scope.row.status }}
        <el-button size="mini" v-if="scope.row.state===0">待支付</el-button>
        <el-button size="mini" type="primary" v-if="scope.row.state===1">已支付</el-button>
        <el-button size="mini" type="info" v-if="scope.row.state===2">已取消</el-button>
        <el-button size="mini" type="success" v-if="scope.row.state===3">已完成</el-button>
        <el-button size="mini" type="info" v-if="scope.row.state===4">已发货</el-button>
      </template>
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="查看">
      <template slot-scope="scope">
        {{ scope.row.status }}
        <el-button size="mini" type="success" @click="view(scope.row)">查看明细</el-button>
      </template>
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="操作">
      <template slot-scope="scope">
        {{ scope.row.status }}
        <el-button size="mini" type="danger" @click="cancel(scope.row)" v-if="scope.row.state===0">取消</el-button>
        <el-button size="mini" type="primary" @click="pay(scope.row)" v-if="scope.row.state===0">支付</el-button>
        <el-button size="mini" type="success" @click="confirmReceipt(scope.row)" v-if="scope.row.state===4">确认收货</el-button>
        <el-button size="mini" type="info"  v-if="scope.row.state===1">等待发货</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    style="display: flex;  justify-content: center;"
    @size-change="handleSizeChange"
    @current-change="paging"
    :current-page="page.pageNum"
    :page-sizes="[5,10,15,20]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="page.total">
  </el-pagination>

  <el-dialog
    title="订单详细"
    :visible.sync="dialogVisible"
    :before-close="close"
    width="70%"
    >
    <el-table
      :data="showData.shoppingCarts"
      style="width: 100%">
      <el-table-column
        prop="product.name"
        label="商品名"
        >
      </el-table-column>
      <el-table-column
        prop="number"
        label="购买数量">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="图片"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.status }}
            <img :src="scope.row.product.coverPath" style="width: 80px">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="单价"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.status }}
            {{scope.row.cost/scope.row.number}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="cost"
        label="小计"
      >
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="close">确 定</el-button>
    </span>
  </el-dialog>

  <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :before-close="close">
    <div v-if="!showFlag">
      <el-table
        ref="singleTable"
        :data="userAddress"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column
          property="mergerName"
          label="地址"
          width="200px">
        </el-table-column>
        <el-table-column
          property="address"
          label="详细地址"
          width="180px">
        </el-table-column>
        <el-table-column
          property="name"
          label="收货人昵称"
          width="150px">
        </el-table-column>
        <el-table-column
          property="phone"
          label="收货人手机号"
          width="160px">
        </el-table-column>
      </el-table>
    </div>

    <el-button type="primary" @click="newAddress" v-if="!showFlag">添加地址</el-button>


    <div v-if="addressFlag&&showFlag">
      请等待
    </div>
    <div v-if="!addressFlag&&showFlag">
      地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
      <el-cascader
        v-model="provinces"
        style="width: 80%"
        :options="address"
        :props="{ label: 'cityname', value: 'id', children: 'children' }"
        @change="handleChange"></el-cascader>
      <br>
      <br>
      详细地址：
      <el-input v-model="addressForm.address" placeholder="请输入详细地址" style="width: 80%"></el-input>
      <br>
      <br>
      手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：
      <el-input v-model="addressForm.phone" placeholder="请输入您的手机号" style="width: 80%"></el-input>
      <br>
      <br>
      姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
      <el-input v-model="addressForm.name" placeholder="请输入收货人姓名" style="width: 80%"></el-input>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close" v-if="!showFlag">取 消</el-button>
      <el-button @click="close1" v-if="showFlag">取 消</el-button>
      <el-button type="primary" @click="aliPay" v-if="!showFlag">付 款</el-button>
      <el-button type="primary" @click="addNewAddress" v-if="showFlag">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>

</style>
